<template>
    <view :style="{ '--color': color }" v-if="showAgree">
        <u-popup :show="true" mode="bottom" round="10">
            <view class="Cotent">
                <view class="rows">
                    <u-tabs :list="dataList" @click="click" :activeStyle="activeStyle" :current="current" lineColor="#ff6501"></u-tabs>
                </view>

                <view class="content">
                    <view class="rows" v-for="(item, index) in dataList" :key="index" v-if="index == current">
                        <u-parse :content="item.website_article_content" :domain="imgUrl"></u-parse>
                    </view>
                </view>
                <view class="bots">
                    <view class="list Turndown" @click="ControlsBtn">拒绝</view>
                    <view class="list agree" @click="ControlsBtn">同意</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex';
    export default {
        name: 'homeAgree',
        // props: ['showAgree'],
        data() {
            return {
                imgUrl: this.imgUrl,
                show: true,
                contentOne: '',
                contentTwo: '',
                contentThree: '',
                dataList: [
                    {
                        id: 32729
                    },
                    {
                        id: 32731
                    },
                    {
                        id: 32730
                    }
                ],
                current: 0,
                showAgree: false,
                activeStyle: {
                    color: '#ff6501',
                    fontSize: '32rpx'
                },
                inactiveStyle: {
                    fontSize: '32rpx'
                }
            };
        },
        created() {
            this.articleInfo();
        },
        methods: {
            ...mapMutations(['setAgree']),
            click(e) {
                this.current = e.index;
            },
            articleInfo() {
                this.dataList.forEach((item) => {
                    this.$http
                        .post({
                            url: '/zzjApp/articleInfo',
                            data: {
                                website_article_id: item.id
                            }
                        })
                        .then((res) => {
                            if (res.errcode != '00000') return;
                            const result = res.data;
                            item.name = result.website_article_title;
                            item.website_article_content = result.website_article_content;
                        });
                });

                setTimeout(() => {
                    if (!this.vid) {
                        uni.hideTabBar();
                        this.showAgree = true;
                    } else {
                        uni.showTabBar();
                        this.showAgree = false;
                    }
                }, 1000);
            },

            ControlsBtn(falg) {
                this.showAgree = false;
                uni.showTabBar();
            }
        },
        computed: {
            ...mapState(['color', 'agreement', 'vid'])
        }
    };
</script>

<style lang="scss" scoped>
    .Cotent {
        width: 100%;
        padding: 30rpx;
        height: 1000rpx;
        display: flex;
        flex-direction: column;
    }
    .content {
        flex: 1;
        margin: 20rpx 0;
        overflow-y: scroll;
    }
    .bots {
        width: 100%;
        height: 100rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .list {
        width: 240rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 30rpx;
        border-radius: 20rpx;
        position: relative;
    }
    .Turndown {
        color: #ccc;
    }
    .agree {
        color: var(--color);
    }
    .Turndown::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #cccccc;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        transform-origin: left top;
        -webkit-transform-origin: left top;
        border-radius: 20rpx;
    }
    .agree::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid var(--color);
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        width: 200%;
        height: 200%;
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        transform-origin: left top;
        -webkit-transform-origin: left top;
        border-radius: 20rpx;
    }
</style>
